<template>
	 <div>
	        <van-nav-bar class="login-van-nav-bar" title="登录"/>
	        <van-form @submit="onSubmit" ref="loginFrom">
				<!--  -->
	            <van-field
	                    v-model="user.mobile"
	                    name="mobile"
	                    placeholder="请输入手机号"
	                    :rules="userFormRules.mobile"
	            >
	                <!--通过插槽的方式添加自定义的字体图标-->
	                <i slot="left-icon" class="toutiao toutiao-shouji"></i>
	            </van-field>
	            <van-field
	                    v-model="user.code"
	                    type="password"
	                    name="验证码"
	                    placeholder="请输入验证码"
	                    :rules="userFormRules.code"
	            > 
				<!--通过插槽的方式添加自定义的字体图标-->
				<i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
				 <template #button>
					 <div class="line"></div>
					 <!-- v-if的值为true,组件显示;v-else,组件隐藏 -->
					 <!-- format表示倒计时显示格式 -->
					 <!-- finish事件，在倒计时结束时自动触发 -->
					 
					 <!--  -->
					 <van-count-down 
					     v-if="isCountDownShow"
					     :time="1000*30" 
					     format="ss s" 
						 @finish='isCountDownShow=false'/>
						 <!-- 表单提交时会对其中所有具有验证属性的表单项进行校验 -->
						 <!--native-type="button"可以防止触发表单提交，进而防止对所有表单项进行校验  -->
				  <van-button 
					    v-else
					    round 
					    size="small" 
					    type="primary" 
						native-type="button"
						@click="onSendSms">发送验证码</van-button>
				  </template>
				</van-field>
	            <div class="login-btn">
	                <van-button block type="info" native-type="submit" class="submit">登录</van-button>
	            </div>
	        </van-form>
	    </div>
</template>

<script>
	// 2.
	// import request from "@/utils/request"
	// 按需导入"@/api/user"模板中的变量login
	import { login,getSmsCode } from "@/api/user"
	export default{
		data(){
			return{
				// 默认隐藏，手机号验证通过，单击‘发送验证码按钮’显示
				// 使用v-if
				isCountDownShow:false,
				user:{
					mobile:'',
					code:''
				},
				// 表单验证
				userFormRules:{
						// required必填
					mobile:[
						{required:true,message:'手机号不能为空'},
						{pattern:/^1[3|5|7|8]\d{9}$/,message:'手机号格式错误'}
					],
					code:[
						{required:true,message:'验证码不能为空'},
						{pattern:/^\d{6}$/,message:'手机号格式错误'}
					]
				}
			}
		},
		methods:{
			
			// 手机号验证
			// 3创建user.js封装请求方法
			// try{...}catch{..}处理异常，try捕获异常代码，catch对捕获的异常代码进行处理
			async onSubmit(){
				this.$toast.loading({
					message:'登录。。。',
					duration:0,
					forbidClick:true
					})
				try{
					// {data:res}解构赋值
					var {data:res}=await login(this.user)
					this.$toast.success({
						message:'登录成功！',
						duration:5000,
						forbidClick:true
					})
					// 在catch中设置形参，对接收到的形参进行处理
					// 接受到的形参是捕获到的错误
				}catch(e){
					console.dir(e)
					if(e.response.status===400){
						this.$toast.fail('手机格式不正确、验证失败')
					}else{
						this.$toast.fail('系统忙，稍后再试...')
					}
				}
			},
			// 校验手机号
			async onSendSms(){
				// van-form-->loginFrom获取表单信息
				try{
					// 通过 ref 可以获取到 Form 实例并调用实例方法
					// validate验证表单，支持传入 name 来验证单个或部分表单项
					    // validate函数返回的值是promise对象，
					// mobile手机号name属性值
					await this.$refs.loginFrom.validate('mobile')
					this.$toast.success('验证码已发送')
					// console.log('手机号校验成功')
					// 2. 验证通过，显示倒计时
					// this.isCountDownShow = true
				}catch(err){
					console.log('校验失败',err)
					this.$toast.fail('手机号校验失败')
				}
				
				 // 2. 验证通过，显示倒计时
				this.isCountDownShow=true
				
				try{
					await getSmsCode(this.user.mobile)
					this.$toast.success('验证码发送成功')
				}catch(err){
					// 发送失败，关闭倒计时
					this.isCountDownShow=false
					// 
					if(err.response.status===429){
						this.$toast('发送太频繁，请稍后重试')
					}else{
						this.$toast('发送失败，请稍后重试')
					}
				}
				
			}
			
		}
	}
</script>

<style scoped="scoped" lang="less">
	.van-nav-bar__content{
		.van-ellipsis{
			color: #fff;
		}
	}
	.toutiao{
		font-size: 37px;
	}
    .van-cell{
		font-size: 26px;
	}
	.submit{
		opacity: .8;
	}
	.van-button--primary{
		height: 46px;
		color: #666;
		background-color: #ededed;
		border-color: #ededed;
	}
	.toutiao-yanzhengma{
		position: relative;
		// top: 10px;
	}
	
	.line{
		position: absolute;
		right: 180px;
		top: 50%;
		transform: translateY(-50%);
		width: 3px;
		height: 46px;
		background-color: #eeeeee;
	}
	.login-btn{
		padding: 53px 25px;
		.van-button{
			background-color: #6db4fb;
			border: none;
		}
	}
	
	.van-count-down{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 156px;
		height: 46px;
		background-color: #ededed;
		border-color: #ededed;
		border-radius: 23px;
		text-align: center;
		color: #666;
	}
</style>
